<template>
    <div class="Cascader">
        <div class="van-cascader">
            <div class="van-cascader__header">
                <div
                    class="qs-btn"
                    @click="closeCascader"
                    style="color: #666; border: 1px solid rgba(0, 0, 0, 0.2)"
                >
                    取消
                </div>
                <h2 class="van-cascader__title">
                    {{ title }}， <span>多选，最多{{ num }}项</span>
                </h2>
                <div class="qs-btn" @click="closeCascader">确定</div>
            </div>
            <div class="s-list">
                <div
                    class="s-list-cell"
                    v-for="(item, index) in overCheckList"
                    :key="index"
                    @click="quxiaoLi(item)"
                >
                    {{ item.name }}
                </div>
            </div>
            <div class="van-tabs van-tabs--line van-cascader__tabs">
                <div class="van-tabs__wrap van-tabs__wrap--scrollable">
                    <div
                        role="tablist"
                        class="
                            van-tabs__nav
                            van-tabs__nav--line
                            van-tabs__nav--complete
                        "
                        ref="tablist"
                    >
                        <div
                            role="tab"
                            class="van-tab van-cascader__tab"
                            :class="{ 'van-tab--active': state == index }"
                            @click="checkTab(index)"
                            v-for="(item, index) in choiceList"
                            :key="index"
                        >
                            <span class="van-tab__text">{{ item }}</span>
                        </div>
                        <div
                            class="van-tabs__line"
                            style="transition-duration: 0.3s"
                            :style="{
                                transform: 'translateX(' + tablistL + 'px)',
                                width: tablistW + 'px',
                            }"
                        ></div>
                    </div>
                </div>
                <div class="van-tabs__content">
                    <div
                        class="van-tabs__track"
                        style="
                            transform: translate3d(-100%, 0px, 0px);
                            transition-duration: 0.3s;
                        "
                        :style="{
                            transform:
                                'translate3d(-' + state + '00%, 0px, 0px)',
                        }"
                    >
                        <div
                            role="tabpanel"
                            class="
                                van-tab__pane-wrapper
                                van-tab__pane-wrapper--inactive
                            "
                            :aria-hidden="state != index"
                            v-for="(item, index) in choiceResult.children"
                            :key="index"
                            :class="{
                                'van-tab__pane': item.checkId == index,
                                'van-tab__pane-wrapper': item.checkId != index,
                                'van-tab__pane-wrapper--inactive':
                                    item.checkId != index,
                            }"
                        >
                            <div class="van-tab__pane">
                                <ul class="van-cascader__options">
                                    <li
                                        class="van-cascader__option curpoint"
                                        v-for="(el, i) in item.children"
                                        :key="i"
                                        :class="{
                                            'van-cascader__option--selected':
                                                el.ischeck &&
                                                index == leavl - 1,
                                        }"
                                        @click="checkLiFn(index, el.id, el)"
                                    >
                                        <span>{{ el.name }}</span>
                                        <i
                                            v-if="
                                                el.ischeck && index == leavl - 1
                                            "
                                            class="
                                                van-icon van-icon-success
                                                van-cascader__selected-icon
                                            "
                                            ><!----></i
                                        >
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
// import { axiosPost } from '../axios';
import { Toast } from 'vant';
export default {
    name: '',
    props: ['jobs', 'leavl', 'title', 'num'],
    data() {
        return {
            state: 0,
            tablistW: 0,
            tablistL: 0,
            // 选择列表
            choiceList: ['请选择'],
            choiceResult: {
                checkName: '',
                checkId: 1,
                children: [],
            },
            overCheckList: [],
        };
    },
    computed: {},
    mounted() {
        // console.log(this.jobs);

        this.checkTab(0);
    },
    methods: {
        // 关闭弹窗传回数据
        closeCascader() {
            this.$emit('calcaCallback', this.overCheckList);
        },
        // 根据最小选择插入数据
        computeData(index, el, i) {
            if (
                index == this.leavl - 1 &&
                this.choiceResult.children.length != 0
            ) {
                return;
            }
            this.choiceResult.children[index + 1] = {
                checkName: '',
                checkId: 0,
                children: this.computedJob(i),
            };
            if (!this.choiceResult.children[index + 1]) {
                this.choiceList.unshift(el.name);
            } else {
                this.choiceList[index + 1] = el.name;
            }

            this.$nextTick(() => {
                this.checkTab(index + 1);
            });
        },
        // 取消选择
        quxiaoLi(item) {
            let newoverCheckList = this.overCheckList.concat();
            newoverCheckList.forEach((el, index) => {
                if (el.id == item.id) {
                    newoverCheckList.splice(index, 1);
                }
            });
            this.overCheckList = newoverCheckList;
            let newchoiceResult =
                this.choiceResult.children[this.leavl - 1].children.concat();
            newchoiceResult.map((el) => {
                if (item.id == el.id) {
                    el.ischeck = !el.ischeck;
                }
                return item;
            });
            this.choiceResult.children[this.leavl - 1].children =
                newchoiceResult;
        },
        // 设置选中项内容
        overCheckFn(item, index) {
            if (index != this.leavl - 1) {
                return;
            }
            if (item.ischeck) {
                this.overCheckList.push(item);
                if (this.num == 1) {
                    this.closeCascader();
                }
            } else {
                let newoverCheckList = this.overCheckList.concat();
                newoverCheckList.forEach((el, index) => {
                    if (el.id == item.id) {
                        newoverCheckList.splice(index, 1);
                    }
                });
                this.overCheckList = newoverCheckList;
            }
        },
        // 最小选择
        checkLiFn(index, id, el) {
            if (this.overCheckList.length >= this.num) {
                Toast({
                    message: '最多选' + this.num + '个',
                    duration: 2000,
                });
                this.closeCascader();
                return;
            }
            let newchoiceResult = this.choiceResult.children.concat();
            newchoiceResult.map((el, x) => {
                if (index == x) {
                    el.checkId = index;
                    el.children.map((item) => {
                        if (id == item.id) {
                            item.ischeck = !item.ischeck;
                            this.overCheckFn(item, index);
                        }
                        return item;
                    });
                }
                return el;
            });
            this.choiceResult.children = newchoiceResult;

            if (index < 2) {
                this.computeData(index, el, id);
            }
        },
        // 计算列表
        computedJob(index) {
            let newJob = [];
            for (let i in this.jobs[index]) {
                let li = {
                    id: i,
                    name: this.jobs[index][i],
                    ischeck: false,
                };
                this.overCheckList.forEach((el) => {
                    if (el.id == i) {
                        li.ischeck = true;
                    }
                });
                newJob.push(li);
            }

            return newJob;
        },
        checkTab(state) {
            this.state = state;
            // 计算宽度
            let w = 0;
            this.tablistW =
                this.$refs.tablist.children[state].children[0].offsetWidth;
            this.$refs.tablist.children.forEach((el, i) => {
                if (i < state) {
                    w += el.offsetWidth + 30;
                }
            });
            this.tablistL = w + 40;
            if (state == 0) {
                this.choiceResult.children[0] = {
                    checkName: '',
                    checkId: 0,
                    children: this.computedJob(0),
                };
            }
        },
    },
};
</script>

<style lang="less" scope>
.Cascader {
    .s-list {
        padding: 0 0.64rem;
    }
    .qs-btn {
        padding: 0.1rem 0.5rem;
        border: 1px solid #fd8000;
        color: #fd8000;
        margin: 0;
    }
    .s-list-cell {
        display: inline-block;
        position: relative;
        height: 1.28rem;
        line-height: 1.28rem;
        margin-bottom: 0.32rem;
        text-align: center;
        margin-right: 0.4267rem;
        padding: 0 0.32rem;
        padding-right: 1.0667rem;
        border: 1px solid rgba(0, 0, 0, 0.2);
        color: #666;
        border-radius: 0.1707rem;
    }
    .s-list-cell:after {
        content: '\2715';
        position: absolute;
        top: 0;
        right: 0.2133rem;
        font-weight: 100;
    }
    .van-cascader__header {
        height: 2rem;
        padding: 0 0.64rem;
    }

    .van-cascader__tabs .van-tabs__nav--complete {
        padding: 0 0.64rem;
    }

    .van-cascader__tabs.van-tabs--line .van-tabs__wrap {
        height: 1.024rem;
    }

    .van-cascader__title {
        font-size: 0.68267rem;
        color: #969799;
    }
    .van-popup--bottom.van-popup--round {
        border-radius: 0;
    }

    .van-cascader__tabs .van-tab {
        font-size: 0.68267rem;
        padding: 0;
        margin-right: 0.4267rem;
    }

    .van-tabs__line {
        position: absolute;
        bottom: 0px;
        left: 0;
        z-index: 1;
        width: 2rem;
        height: 3px;
        background-color: #ee0a24;
        border-radius: 3px;
    }

    .van-cascader__options {
        box-sizing: border-box;
        height: 12rem;
        padding-top: 6px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 0.64rem;
        margin-top: 0.4267rem;
    }

    .van-cascader__options {
        padding-bottom: 0.5rem;
    }
    .van-cascader__option {
        font-size: 0.4693rem;
        float: none;
        width: 100%;
        text-align: center;
        font-size: 0.68267rem;
        line-height: 1.3rem;
        padding: 0;
    }

    .van-cascader__close-icon {
        color: #c8c9cc;
        font-size: 0.8533rem;
    }
}

.curpoint {
    cursor: pointer;
}
</style>
